const path = require('path') // 引入node内置模块path 处理文件路径
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 提取css
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')


module.exports = {
  //入口
  //入口改为对象可以配置多个入口
  entry: {
    //公共css入口
    commonCss: "./src/css/common/commonCss.js",

    dom: "./src/js/commonjs/dom.js", //封装dom操作
    http: "./src/js/commonjs/http.js", //封装ajax请求
    utils: "./src/js/commonjs/utils.js", //可复用的工具函数
    //页面入口
    index: './src/js/index.js',
    advertising: './src/js/advertising.js', //广告
    login: './src/js/login.js',
    register: './src/js/register.js', //注册
    sport: './src/js/sport.js',
    mine: './src/js/mine.js',
    courseDescription: './src/js/courseDescription.js', //课程介绍
    person: './src/js/person.js', //个人信息

  },


  //出口
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: 'js/[name]-[hash:5].js' // 输出文件名
  },

  // 模式： development: 开发模式  production: 生产模式
  mode: 'development',

  // loader配置
  module: {
    rules: [{
        test: /\.css$/, // 匹配所有.css文件
        use: [
          // 'style-loader', // 创建style标签 把css插入html的head内
          // MiniCssExtractPlugin.loader,
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../"
            }
          },
          'css-loader', "postcss-loader" // 解析加载css到js中（把css打成字符串）。
        ]
      },
      // less配置
      {
        test: /\.less$/, // 匹配所有.less文件
        use: [
          // 'style-loader', // 创建style标签 把css插入html的head内
          // MiniCssExtractPlugin.loader,
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../"
            }
          },
          'css-loader', // 解析加载css到js中（把css打成字符串）。
          "postcss-loader",
          'less-loader', // 编译less为css

        ]
      },
      //配置图片
      {
        test: /\.(jpg|png|gif|mp4)$/,
        loader: 'url-loader',
        options: {
          name: '[hash:6].[ext]', // 图片输出的名字hash长度16位 默认32位
          limit: 10 * 1024, // 小于10kb base64处理
          // 关闭url-loader的es Module  使用commonjs module解析 , url-loader默认使用es6模块化解析 而后续使用 html-loader 引入图片是 commonjs解析  不关闭会报错
          esModule: false,
          outputPath: 'img', // 图片输出的路径
        }

      },
      // html资源配置
      {
        test: /\.html$/, // 匹配所有.less文件
        loader: "html-loader"
      },
      // 字体图片配置
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/, // 处理字体格式文件
        loader: "file-loader",
        options: {
          name: "[hash:8].[ext]",
          outputPath: "fonts" //输出路径
        }
      },
      //把es6转为es5
      {
        test: /\.js$/,
        loader: 'babel-loader', // loader 编译es6为es5
        exclude: /node_modules/ // 排除
      }


    ]
  },
  //插件
  plugins: [
    //  主页
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
      chunks: ["index", "commonCss", "dom", "http", "utils"]

    }),
    //广告页
    new HtmlWebpackPlugin({
      template: "./src/advertising.html",
      filename: "advertising.html",
      chunks: ["advertising", "commonCss", "dom", "http", "utils"]

    }),
    //登录页
    new HtmlWebpackPlugin({
      template: "./src/login.html",
      filename: "login.html",
      chunks: ["login", "commonCss", "dom", "http", "utils"]

    }),
    // 注册页
    new HtmlWebpackPlugin({
      template: "./src/register.html",
      filename: "register.html",
      chunks: ["register", "commonCss", "dom", "http", "utils"]

    }),
    // 运动
    new HtmlWebpackPlugin({
      template: "./src/sport.html",
      filename: "sport.html",
      chunks: ["sport", "commonCss", "dom", "http", "utils"]

    }),
    // 我的
    new HtmlWebpackPlugin({
      template: "./src/mine.html",
      filename: "mine.html",
      chunks: ["mine", "commonCss", "dom", "http", "utils"]

    }),
    // 课程介绍
    new HtmlWebpackPlugin({
      template: "./src/courseDescription.html",
      filename: "courseDescription.html",
      chunks: ["courseDescription", "commonCss", "dom", "http", "utils"]

    }),

    // 个人信息
    new HtmlWebpackPlugin({
      template: "./src/person.html",
      filename: "person.html",
      chunks: ["person", "commonCss", "dom", "http", "utils"]

    }),
    // 处理html  把index.html复制到dist中 自动引入资源文件
    new MiniCssExtractPlugin({
      filename: 'css/[name]-[hash:5].css'
    }),
    //压缩css
    new OptimizeCssAssetsWebpackPlugin()
  ],

  devServer: {
    contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
    compress: true, // 启动gzip压缩
    port: 888, // 端口
    open: true, // 自动打开浏览器
    publicPath: "/",
    openPage: "advertising.html"
  },


}